<template>
  <div class="theme-switcher">
    <div 
      class="theme-option"
      :class="{ active: currentTheme === 'light' }"
      @click="setTheme('light')"
    >
      <span class="theme-icon">☀️</span>
      <span class="theme-text">浅色</span>
    </div>
    <div 
      class="theme-option"
      :class="{ active: currentTheme === 'dark' }"
      @click="setTheme('dark')"
    >
      <span class="theme-icon">🌙</span>
      <span class="theme-text">深色</span>
    </div>
    <div 
      class="theme-option"
      :class="{ active: currentTheme === 'auto' }"
      @click="setTheme('auto')"
    >
      <span class="theme-icon">🔄</span>
      <span class="theme-text">自动</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ThemeSwitcher',
  data() {
    return {
      currentTheme: 'auto',
      mediaQuery: null
    }
  },
  mounted() {
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme) {
      this.currentTheme = savedTheme
      this.applyTheme(savedTheme)
    } else {
      this.currentTheme = 'auto'
      this.initSystemTheme()
    }
  },
  methods: {
    setTheme(theme) {
      this.currentTheme = theme
      this.applyTheme(theme)
      localStorage.setItem('theme', theme)
    },
    applyTheme(theme) {
      const root = document.documentElement
      if (theme === 'auto') {
        root.removeAttribute('data-theme')
        if (this.mediaQuery) {
          this.handleSystemThemeChange(this.mediaQuery)
        }
      } else {
        root.setAttribute('data-theme', theme)
      }
    },
    initSystemTheme() {
      if (window.matchMedia) {
        this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
        this.mediaQuery.addEventListener('change', this.handleSystemThemeChange)
        this.handleSystemThemeChange(this.mediaQuery)
      }
    },
    handleSystemThemeChange(event) {
      if (this.currentTheme !== 'auto') return
      const root = document.documentElement
      const isDark = event.matches !== undefined ? event.matches : event.matches
      root.setAttribute('data-theme', isDark ? 'dark' : 'light')
    }
  },
  beforeUnmount() {
    if (this.mediaQuery) {
      this.mediaQuery.removeEventListener('change', this.handleSystemThemeChange)
    }
  }
}
</script>

<style scoped>
.theme-switcher {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-small);
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  backdrop-filter: var(--backdrop-blur-light);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-mini);
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: var(--font-size-sm);
  color: var(--text-regular);
  user-select: none;
}

.theme-option:hover {
  background: var(--bg-white);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.theme-option.active {
  background: var(--primary-color);
  color: white;
  box-shadow: var(--shadow-light);
}

.theme-icon {
  font-size: var(--font-size-base);
}

.theme-text {
  font-weight: 500;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .theme-switcher {
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
  }
  
  .theme-option {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

@media screen and (max-width: 480px) {
  .theme-text {
    display: none;
  }
  
  .theme-option {
    padding: var(--spacing-sm);
  }
  
  .theme-icon {
    font-size: var(--font-size-lg);
  }
}
</style> 